<template>
    <div class="assignment">
        <n-modal :show-icon="false" v-model:show="showModal" preset="dialog" title="角色授权" style="width:50%"
            :on-positive-click="submitCallback" :on-close="cancelCallback">
            <div class="modalBox">
                <div class="title"><span>角色名称：</span><span>管理员</span></div>
                <n-form-item label="角色名称" label-placement="left">
                    <n-tree block-line cascade checkable :data="data" width="300px"
                        :default-expanded-keys="defaultExpandedKeys" :default-checked-keys="defaultCheckedKeys"
                        label-field="menuName" key-field="_id" @update:checked-keys="updateCheckedKeys"
                        @update:selected-keys="updateMoCheckedKeys" />
                </n-form-item>
            </div>
            <template #action>
                <n-space>
                    <n-button @click="cancelCallback">取消</n-button>
                    <n-button type="info" :loading="formBtnLoading" @click="submitCallback">确定</n-button>
                </n-space>
            </template>
        </n-modal>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs, onMounted } from 'vue'
import { repeat } from 'seemly'
import { TreeOption ,useMessage } from 'naive-ui'
import { updatePermission } from '../../../../api/role.js'
import { menusList } from '../../../../api/menu.js'
// @ts-ignore
const message = useMessage()
export default defineComponent({
    setup(props,{emit}) {
        const defaultExpandedKeys = ref([])
        const defaultCheckedKeys = ref([])
        const menuRoleList = ref([])
        onMounted(() => {
            menusList({}).then(item => {
                // console.log('=======',item)
                menuRoleList.value = item
            })
        })
        const state = reactive({
            showModal: false,
            formBtnLoading: false
        })
        const rolePmar = reactive({
            _id: '',
            permissionList: {
                checkedKeys: [],
                halfCheckedkeys: []
            }
        })
        const methods = reactive({
            // 全部
            updateCheckedKeys: (v: string[]) => {
                console.log('updateCheckedKeys', v)
                rolePmar.permissionList.checkedKeys=v
            },
            // 部分
            updateMoCheckedKeys: (v: string[]) => {
                console.log('====121==', v)
            },

            submitCallback: () => { 
            if( rolePmar.permissionList.checkedKeys.length ==0 ) return message.warning('请先设置权限')
             updatePermission(rolePmar).then(res=>{
                 message.success('设置成功')
                 emit('getRole')
                 state.showModal = false
             })
            },
            cancelCallback: () => {
                state.showModal = false
            },
            panel(item) {
                rolePmar.permissionList.checkedKeys=item.permissionList.checkedKeys
                defaultExpandedKeys.value=item.permissionList.checkedKeys
                defaultCheckedKeys.value=item.permissionList.checkedKeys
                rolePmar._id = item._id
                state.showModal = true
            },
        })
        return {
            data: menuRoleList,
            defaultExpandedKeys,
            defaultCheckedKeys,
            ...toRefs(methods),
            ...toRefs(state)
        }
    }
})
</script>

<style lang="scss" scoped>
.assignment {
    .modalBox {}
}

.title {
    font-size: 20px;
    margin: 20px auto;
}

.n-tree {
    width: 100%;
}
</style>